<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	ul{width:390px; height:270px;margin:0;padding: 0; border:1px solid #000;margin: 40px auto 0;padding: 10px 0 0 10px; position: relative;}
	li{width:120px; height:80px;list-style: none;float: left; margin: 0 10px 10px 0;background-color: #ccc;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oUl = document.getElementById('ul1');
		var aLi = document.getElementsByTagName('li');

		for (var i = 0; i < aLi.length; i++) {
			aLi[i].innerHTML = 'left:'+ aLi[i].offsetLeft +',top:' + aLi[i].offsetTop;

			aLi[i].style.left = aLi[i].offsetLeft + 'px';
			aLi[i].style.top = aLi[i].offsetTop + 'px';
		};
		for (var i = 0; i < aLi.length; i++) {			//不能偷懒写在上面的for里面，虽然也会加入定位，但是所有的li都叠在一起了
			aLi[i].style.position = 'absolute';
			//aLi[i].style.margin = '0';			//因为offsetLeft/offsetTop是有包含margin值的。只是刚好我设置li的margin时没有设置左和上，所以这句话不用加，但是如果在css样式中调整一下，把ul的padding设置右和下，li的margin设为左和上，那这句话就必须加了，否者margin-left和定位的left就叠加了
		};
	}

	function doMove(obj, json){
		clearInterval(obj.timer);

		obj.timer = setInterval(function(){
			var iCur = 0;
			var bStop = true;

			for (var attr in json){
				if (attr == 'opacity') {
					iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
				}else{
					iCur = parseInt(getStyle(obj, attr));
				};

				var iSpeed = (json[attr] - iCur)/8;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

				if (attr == 'opacity') {
					obj.style.opacity = (iCur + iSpeed)/100;
					obj.style.filter = 'alpha(oapcity:'+ (iCur + iSpeed) +')';
				};

				if (iCur != json[attr]) {
					bStop = false;
				};
			}
			if (bStop) {
				clearInterval(obj.timer);
			};
		},30);
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<ul id="ul1">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>